<template>
	<view :style="{ height: pageHeight, overflow: 'hidden' }">
		<search @search="disableScroll" />
		<!-- 焦点图 -->
		<swiper class="banner" indicator-dots indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#fff">
			<swiper-item v-for="item in swipterList" :key="item.goods_id">
				<navigator :url="`/subpkg/pages/goods/index?id=${item.goods_id}`">
					<image :src="item.image_src"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 导航条 -->
		<view class="navs">
			<!-- 判断是否有switchTab-->
			<navigator
				:key="item.name"
				v-for="item in CatoryList"
				:open-type="item.open_type || 'navigate'"
				:url="item.open_type ? '/pages/category/index' : `/subpkg/pages/list/index?query=${item.name}`"
			>
				<image :src="item.image_src"></image>
			</navigator>
		</view>
		<!-- 楼层 -->
		<view class="floors">
			<view class="floor" v-for="item in FloorList" :key="item.floor_title.name">
				<view class="title"><image :src="item.floor_title.image_src"></image></view>
				<view class="items">
					<navigator
						v-for="product in item.product_list"
						:key="product.name"
						:url="`/subpkg/pages/list/index?query=${product.name}`"
					>
						<image :src="product.image_src"></image>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 回到顶部 -->
		<view class="goTop icon-top" @click="goTop"></view>
	</view>
</template>

<script>
import search from '@/components/search';

export default {
	data() {
		return {
			pageHeight: 'auto',
			swipterList: [],
			CatoryList: [],
			FloorList: []
		};
	},
	components: {
		search
	},
	onLoad() {
		this.getArtList();
		this.getCatoryList();
		this.getFloorlist();
	},
	//监听用户下拉操作
	async onPullDownRefresh() {
		//等待请求结束停止刷新操作
		await this.getArtList();
		await this.getCatoryList();
		await this.getFloorlist();
		//停止下拉交互
		uni.stopPullDownRefresh();
	},
	methods: {
		goTop() {
			//回到最顶部
			uni.pageScrollTo({
				scrollTop: 0
			});
		},
		disableScroll(ev) {
			//得到页面的高度
			this.pageHeight = ev.pageHeight;
		},
		async getArtList() {
			const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata');
			//判断数据是否获取成功
			if (res.meta.status !== 200) {
				return uni.showToast({
					title: '数据加载失败!',
					duration: 1500,
					icon: 'none'
				});
			}
			// console.log(res);
			this.swipterList = res.message;
		},
		async getCatoryList() {
			const { data: res } = await uni.$http.get('/api/public/v1/home/catitems');
			//判断数据是否获取成功
			if (res.meta.status !== 200) {
				return uni.showToast({
					title: '数据加载失败!',
					duration: 1500,
					icon: 'none'
				});
			}
			// console.log(res);
			this.CatoryList = res.message;
		},
		async getFloorlist() {
			const { data: res } = await uni.$http.get('/api/public/v1/home/floordata');
			//判断数据是否获取成功
			if (res.meta.status !== 200) {
				return uni.showToast({
					title: '数据加载失败!',
					duration: 1500,
					icon: 'none'
				});
			}
			// console.log(res);
			this.FloorList = res.message;
		}
	}
};
</script>

<style scoped lang="scss">
.banner {
	width: 100%;
	height: 340rpx;

	image {
		width: 100%;
		height: 340rpx;
	}
}

.navs {
	display: flex;
	justify-content: space-between;
	padding: 30rpx 44rpx;

	image {
		width: 128rpx;
		height: 140rpx;
	}
}

.floor {
	.title {
		width: 750rpx;
		height: 60rpx;
		padding: 20rpx 0 0 8rpx;
		background-color: #f4f4f4;
	}

	.items {
		padding: 20rpx 16rpx;
		overflow: hidden;

		navigator {
			width: 193rpx;
			height: 188rpx;
			margin-left: 10rpx;
			margin-bottom: 10rpx;
			float: left;
		}

		navigator:first-child {
			width: 232rpx;
			height: 386rpx;
			margin-left: 0rpx;
		}

		navigator:nth-child(2),
		navigator:nth-child(5) {
			width: 273rpx;
		}
	}

	&:first-child {
		.items {
			navigator {
				width: 233rpx;
			}
		}
	}
}

.goTop {
	position: fixed;
	bottom: 30rpx;
	/* #ifdef H5 */
	bottom: 65px;
	/* #endif */
	right: 30rpx;

	display: flex;
	justify-content: center;
	align-items: center;
	width: 100rpx;
	height: 100rpx;
	font-size: 48rpx;
	color: #666;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.8);
}
</style>
